<!DOCTYPE html>
<html lang="en">

<head>
    <title>条纹效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./streak.css" />
</head>

<body>
    <div class="header">
        <span class="reduce img">-</span>
        <span class="add img">+</span>
        <span class="title-big">CSS中条纹效果的实现方案</span>
    </div>
    <div class="layout">
        <div class="contain box1">
            <div class="descript">
                <span class="title">方案1: </span>多个元素组合  <br>此方案优点：
                <br> 1:原理直观，易理解；
                <br> 2:可以实现任意多颜色的条纹效果；
                <br> 此方案缺点：
                <br> 1；添加了较多冗余的元素；
            </div>

        </div>
        <div class="contain box2">
            <div class="descript">
                <span class="title">方案2: </span>多色条纹
                <br>此方案的优点：
                <br> 1:用单个元素实现，不用添加冗余元素；
                <br> 2:可以实现任意多颜色的交替重复的条纹；
            </div>
            <div class="article">
                <p class="linear  left">
                </p>
                <p class="right">
                    <span class="back">background-image:</span>
                    repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);
                </p>
            </div>

        </div>

        <div class="contain box3">
                <div class="descript">
                        <span class="title">方案3: </span>双色条纹
                        <br>此方案的优点：
                        <br> 1:用单个元素实现，不用添加冗余元素；
                        <br> 2:不用插入辅助色标；
                        <br>此方案缺点：
                        
                        <br>只能实现2种颜色的条纹；
                </div>
                <div class="article">
            <p class="linear-two  left">
               
            </p>
            <p class="right">
                <span class="back">background-image:</span> linear-gradient(red 50%, blue 50%);
                <br>
                <span class="back">background-size:</span> 100% 20%;
                <br>
                <span class="back">background-repeat:</span> repeat;
                <br>
            </p>
        </div>
        </div>
        <div class="contain box3">
            <p class="linear-four-none  left">
                <span class="title">特性4: </span>
                <br>如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；
                <br>
                <span class="title">特性5: </span>
                <br>如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；</p>
            <p class="  right">
                <span class="back">background-image:</span> linear-gradient(to right,red,green,yellow,purple,blue);</p>
        </div>




    </div>
    <script src="./streak.js"></script>
</body>

</html>